import React, { useState } from 'react'
import { Search, Tabs } from 'react-vant';
import { GemO, Contact } from '@react-vant/icons';
import '../App.css'
import { useNavigate, Outlet } from 'react-router-dom';

export default function Home() {

  /* 搜索框输入的内容 */
  const [value, setValue] = useState('');

  /* 标签页数据 */
  let tabslist = [
    { title: '推荐', path: '/home' },
    { title: '手机', path: '/home/shouji' },
    { title: '智能', path: '/home/zhineng' },
    { title: '电视', path: '/home/dianshi' },
    { title: '家电', path: '/home/jiadian' },
    { title: '笔记本', path: '/home/bijiben' },
  ]

  let navigate = useNavigate()

  return (
    <div>
      {/* 搜索框 */}
      <div className='input'>
        <span><GemO /></span>
        <Search value={value} onChange={setValue} clearable placeholder="请输入搜索关键词" style={{ width: 320 }} />
        <span><Contact /></span>
      </div>

      {/* 标签页 */}
      <Tabs color='orange' onChange={(e: any) => {
        //console.log(e);
        navigate(e)
      }}>
        {tabslist.map((item, index) => (
          <Tabs.TabPane key={index} title={item.title} name={item.path}>
          </Tabs.TabPane>
        ))}
      </Tabs>

      <div>
        {/* 显示二级页面 */}
        <Outlet />
      </div>


    </div>
  )
}
